<template>
  <div class="game-item">
    <div class="first-row">
      <img v-if='game.GAME_TYPE=="CLS"' class='cls' src="http://dl.app.gtja.com/nrng/images/game/chaoji@2x.png"/>
      <i v-else-if='game.GAME_KIND=="1"' class="iconfont icon-guanfang1"></i>
      <div class="name" v-text='game.GAME_NAME'></div>
    </div>
    <div class="second-row">
      <div class="date">
        <div class="begin">{{game.BEGIN_DATE | formatDatePoint }} -</div>
        <div class="end">{{game.END_DATE | formatDatePoint }}</div>
      </div>
      <div class="award">
        <div class="num">{{game.GAME_AMOUNT | cutNumber}}</div>
        <div class="unit">君元宝奖池</div>
      </div>
      <div class="players">
        <div class="attend" v-bind:class='{ full: parseInt(game.GAME_ATTEND_PERSON) >= parseInt(game.GAME_MAX_LIMIT) }'>{{game.GAME_ATTEND_PERSON | cutNumber}}</div>
        <div class="divid"></div>
        <div class="sum">{{game.GAME_MAX_LIMIT | cutNumber}}</div>
      </div>
    </div>
    <div class="third-row">
      <div class="progress">
        <div class="cover" v-bind:style="{ width: game.joinOver} "></div>
      </div>
      <div class="tip"><span v-text='status.text'></span><span class="clock" v-text='status.clock'></span></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.game-item{
  padding: 10px 8%;
  .first-row{
    display: flex;
    .cls{
      width: 10%;
      align-self: center;
    }
    .icon-guanfang1 {
      color: #ff8933;
      font-size: 25px;
    }
    .name{
      color: #565656;
      font-size: 1.7rem;
      flex: 1;
      text-align: center;
    }
  }

  .second-row{
    margin-top: 6px;
    display: flex;
    color: #999;
    font-size: 1.2rem;
    .date{
      flex: 1;
      .end{
      }
    }
    .award{
      flex: 1;
      text-align: center;
      .num{
        color: #2fafec;
        font-size: 1.8rem;
      }
    }
    .players{
      flex: 0.8;
      .attend{
        color: #2FAFEC;
        margin-right: 50%;
        text-align: right;
        width: 50%;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        font-size: 1.6rem;
      }
      .full{
        color: #ff3333;
      }
      .divid{
        width: 35%;
        height: 1px;
        background-color: #B8B8B8;
        margin: 0 auto;
        -webkit-transform:rotate(-36deg);
      }
      .sum{
        margin-left: 50%;
        font-size: 1.2rem;
        width: 50%;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
        color: #999;
      }
    }
  }
  .third-row{
    .progress{
      height: 6px;
      border-radius: 7px;
      width: 100%;
      background-color: #e7e7e7;
      margin: 2px auto;
      .cover{
        background-color: #82d7ff;
        height: 6px;
        width: 0%;
      }
    }
    .tip{
      text-align: center;
      color: #999;
      font-size: 1rem;
      margin-top: 5px;
      .clock{
        color: #ff3333;
      }
    }
  }
}
  
</style>
<script>
import cutNumber from 'filters/cutNumber'
import formatDatePoint from 'filters/formatDatePoint'
  export default {
    props:{
      game: {
        type: Object,
        default: function () {
          return {
            joinOver: '0%'
          }
        }
      }
    },
    data(){
      return{
        timer: null,//报名倒计时的timer，destory时要注销
        unitDay: 24 * 60 * 60 * 1000,
        unitHour: 60 * 60 * 1000,
        unitMin: 60 * 1000,
        unitSec: 1000,
        status:{
          text: '',
          clock: ''
        }
      }
    },
    filters:{cutNumber, formatDatePoint},
    mounted(){
      this.formatData();
    },
    destoryed(){
      if(this.timer != null) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    methods:{
      formatData(){
        this.initTimer();
        // this.game.GAME_AMOUNT = this.addUnit(parseInt(this.game.GAME_AMOUNT));
        this.game.GAME_ATTEND_PERSON = parseInt(this.game.GAME_ATTEND_PERSON);
        this.game.GAME_MAX_LIMIT = parseInt(this.game.GAME_MAX_LIMIT);
      },
      /**
       * 初始化比赛时间、报名进度条相关数据，包括报名倒计时
       * @return {[type]} [description]
       */
      initTimer(){
        // this.game.BEGIN_DATE = this.transferFormatDate(this.game.BEGIN_DATE, '.');
        // this.game.END_DATE = this.transferFormatDate(this.game.END_DATE, '.');

        this.$set(this.game, 'joinOver', '0%')

        //第3行的比赛状态提示，例如比赛已结束、报名倒计时
        switch(this.game.GAME_STEP){
          case '0'://报名未开始
            this.status.text = '比赛未开始';
            this.$set(this.game, 'joinOver', '0%')
            break;
          // case '1'://报名中
          //   this.status.text = '报名倒计时：';
          //   this.countDown();
          //   break;
          // case '2':
          //   this.status.text = '报名已结束';
          //   this.game.joinOver = '100%';
          //   break;
          case '3':
            this.status.text = '比赛中';
            this.countDown();
            // this.game.joinOver = '100%';
            break;
          case '4':
            this.status.text = '比赛已结束';
            this.$set(this.game, 'joinOver', '100%')
            break;
          case '5':
            this.status.text = '比赛失效';
            this.$set(this.game, 'joinOver', '100%')
            break;
        }
      },
      /**
       * 倒计时
       */
      countDown(){
        var gameBeginDate = new Date(this.transferFormatDate(this.game.BEGIN_DATE, '/'));//使用／作为分割符，是因为iOS兼容的原因
        var gameEndDate = new Date(this.transferFormatDate(this.game.END_DATE, '/'));//使用／作为分割符，是因为iOS兼容的原因
        gameEndDate.setHours(23, 59, 59, 999);
        var curDate = new Date();
        var totalTime = gameEndDate.getTime() - gameBeginDate.getTime();
        // var remaining = curDate.getTime() - this.game.JOIN_BEGIN_DATE.getTime();
        var remaining = gameEndDate.getTime() - curDate.getTime()
        if( totalTime <= 0 ){
          this.status = {text:'', clock: ''};
        }
        if(remaining > totalTime) {
          this.status = {text:'', clock: ''};
          return;
        }else {
          this.timer = setInterval(() => {
            if(remaining <= 0) {
              this.destoryTimer()
              this.status = {text:'比赛已结束', clock: ''}
              this.$set(this.game, 'joinOver', '100%')
            }
            else {
              this.$set(this.game, 'joinOver', ((totalTime - remaining) / totalTime) * 100 + '%')
              this.status = {text:'距离比赛结束：', clock: this.transferTime(remaining)};
              remaining -= 1000;
            }
          }, 1000);
        }
      },
      destoryTimer(){
        clearInterval(this.timer);
        this.timer = null;
      },
      /**
       * 将time转换为hh:mm:ss
       * @param  {Number} time 需要转换的时间，单位为ms
       * @return {String}      hh:mm:ss
       */
      transferTime(time){
        if(time > this.unitDay){
          return "只剩"+ Math.ceil(time / this.unitDay)+ "天";
        }else{
          let hours = parseInt(time / this.unitHour);
          let min = parseInt((time % this.unitHour)/ this.unitMin);
          let sec = parseInt((time - hours * this.unitHour - min * this.unitMin) / this.unitSec);
          hours = hours < 10 ? '0'+ hours : hours;
          min  = min < 10 ? '0'+ min : min;
          sec = sec < 10 ? '0'+ sec : sec;
          return hours + ':' + min + ':' + sec;
        }
      },
      /**
       *转换日期格式，服务器给的格式是20160909，转为2016.09.09
       * @param str
       * @param separator
       */
      transferFormatDate (str, separator) {
          if(str == undefined || str == null || str.length < 8) return '0000'+separator+'00'+separator+'00';
          let year = str.substring(0,4);
          let month = str.substring(4,6);
          if(month.length <= 0) month = '01';
          let day = str.substring(6,8);
          if(day.length <= 0) day = '01';
          return year+separator+month+separator+day;
      },
    }
  }
</script>